<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .circle{
                position: absolute;
                width: 200px;
                height: 200px;
                border-radius:50%;
                background-color: #fc0;
                left: 0;
                top: 0;
            }
            .pie_right{
                position: absolute;
                width: 200px;
                height: 200px;
                /* background-color: red; */
                left: 0;
                top: 0;
            }
            .right{
                position: absolute;
                width: 200px;
                height: 200px;
                /*background-color: green;*/
                background-color: #c0f;
                left: 0;
                top: 0;
            }
            .pie_left{
                position: absolute;
                width: 200px;
                height: 200px;
                /* background-color: red; */
                left: 0;
                top: 0;
            }
            .left{
                position: absolute;
                width: 200px;
                height: 200px;
                border-radius:50%;
                background-color: #c0f;
                left: 0;
                top: 0;
            }
            /*.right{
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }*/
            .pie_right,.right{
                clip:rect(0,auto,auto,100px);
            }
            .pie_left,.left{
                clip:rect(0,100px,auto,0);
            }
            .mask{
                width: 150px;
                height: 150px;
                position: absolute;
                left: 25px;
                top: 25px;
                border-radius:50%;
                line-height:150px;
                text-align: center;
                background-color: blue;
                /* clip:rect(0,auto,auto,75px); */
            }
        </style>
    </head>
    <body>
        <h1>jquery圆环百分比进度条制作</h1>
        <p><a href="http://caibaojian.com/jquery-circular-progress.html">来源</a></p>
        <div class="circle">
            <div class="pie_right">
                <div class="right"></div>
            </div>
            <div class="pie_left">
                <div class="left"></div>
            </div>
            <div class="mask"><span>60</span>%</div>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function() {
            $('.circle').each(function(index, el) {
                var num = $(this).find('span').text() * 3.6;
                if (num<=180) {
                    $(this).find('.right').css('transform', "rotate(" + num + "deg)");
                } else {
                    $(this).find('.right').css('transform', "rotate(180deg)");
                    $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
                };
            });

        });
        </script>
    </body>
</html>